<template>
  <div style="width: 100%; height:450px" ref="PieChart" v-on-echart-resize></div>
</template>
<script>
  import "@/utils/chart.resize.js";
  export default {
    name: "index",
    props: {
      data: {
        type: Array,
        default: function () {
          return [];
        },
      },
      title: {
        type: String,
        default: function () {
          return '';
        },
      },
    },

    watch: {
      data(){
          this.initChart()
      }
    },

    methods:{
      initChart(){
        let myChart = this.$echarts.init(this.$refs.PieChart);
        let option;
        option = {
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c}(元) ({d}%)'
          },
          legend: {
            bottom: 10,
            left: 'center',
          },
          series: [
            {
              type: 'pie',
              center: ['50%', '50%'],
              selectedMode: 'single',
              data: this.data
            }
          ]
        };
        option && myChart.setOption(option);
      }
    },

    mounted() {
      this.initChart()
    }
  }
</script>

<style scoped>

</style>
